<template>
    <div>
        <h1>{{msg}}</h1>
        <h1>学生姓名：{{name}}</h1>
        <h1>学生性别：{{sex}}</h1>
        <h1>学生年龄：{{rAge}}</h1>
        <button @click="changeAge">点击修改年龄</button>
        <hr>
    </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            msg: '我是一名学生',
            rAge: this.age
        }
    },
    props: {
        // require代表当前属性外部必须传入，default表示如果未传入则默认以value来展示
        name: {
            type: String,
            require: true
        },
        sex: {
            type: String,
            default: '男'
        },
        age: {
            type: Number,
            require: true
        }
    },
    methods: {
        changeAge() {
            this.rAge++
        }
    }
}
</script>

<style>

</style>